<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 50%;
            margin: 0 auto;
        }

        .subheader_content {
            display: flex;
            justify-content: space-between;
            width: 50%;
        }

        .main-container {
            width: 50%;
            margin: 0 auto;
        }

        .first {
            padding-top: 10px;
            padding-bottom: 5px;
        }

        footer {
            color: white;
            background-color: black;
            position: fixed;
            right: 0;
            bottom: 0;
            text-align: center;
            width: 100%;
        }

        .child-info {
            display: flex;
            align-items: center;
        }

        .circle {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            margin-right: 10px;
        }

        form {
            padding-top: 20px;
            width: 50%;
            margin: 0 auto;
        }

        form div {
            margin-bottom: 15px;
            position: relative;
        }

        label, span {
            display: block;
            margin-bottom: 5px;
        }

        textarea {
            border-width: 0;
            width: 100%;
            padding: 10px;
            background: #e6e6e6;
            border-radius: 5px;
        }

        input[type="date"] {
            border-width: 0;
            width: 100%;
            padding: 10px;
            background: #e6e6e6;
            border-radius: 5px;
        }

        button {
            margin-top: 20px;
            padding: 10px;
            border-width: 0;
            display: block;
            background: #4CAF50;
            color: white;
            text-transform: uppercase;
            border-radius: 5px;
        }

        select {
            padding: 5px;
            background: #e6e6e6;
            border-radius: 5px;
        }

    </style>
    <title>{% block title %}{% endblock title %}</title>
</head>

<body>
    <header>
        <div class="header-content">
            <h1>{% block header %}{% endblock header %}</h1>

            <div class="subheader_content">
                <p><a href="{% url 'm_reminder' %}">Напоминания</a></p>
                <p><a href="{% url 'get_group' %}">Посещаемость</a></p>
                <p><a href="/accounts/logout">Выйти</a></p>
            </div>
        </div>
    </header> 

    <main>
        {% block content %}
        Hello, Olga!
        {% endblock content %}
    </main>

    <footer>
        <p>Moi-sad@2024</p>
    </footer>

</body>

</html>
